<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>局部组件使用</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <!-- <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <hr>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2> -->

            <!-- 第三步：编写组件标签 -->
             <h1>{{msg}}</h1>
             <hr>
             <xuexiao></xuexiao>
             <school></school>
             <hr>
             <xuesheng></xuesheng>
             <xuesheng></xuesheng>
             <student></student>
        </div>
        <hr>
        <div id="root2">
            <!-- root2实例中想要使用组件也要在vm2中注册组件 -->
            <h1>root2实例</h1>
            <hr>
            <school></school>
            <student></student>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示

            //第一步：创建组件-局部注册，哪个vm使用哪个vm去注册
            //1.创建school组件
            const school = Vue.extend({
               //el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务
           
             //将结构写进template，注意要用一个根元素包裹
               template:`
                <div>
                        <h2>学校名称：{{schoolName}}</h2>
                        <h2>学校地址：{{address}}</h2>
                        <button @click="showName">点我提示学校名</button>
                </div>
               `,
                //data不能写成对象式，必须写成函数式
                //    data:{
                //         schoolName:'上海一种',
                //         address:'上海'

                //     }
               data(){
                return {
                    schoolName:'上海一种',
                    address:'上海'
                }
               },
               methods: {
                showName(){
                    alert(this.schoolName)
                }
               },
            })

            //2.创建student组件
            const student = Vue.extend({
                template:`
                    <div>
                        <h2>学生姓名：{{studentName}}</h2>
                        <h2>学生年龄：{{age}}</h2>
                    </div>
                `,
               data(){
                return {
                    studentName:'张三',
                    age:18
                }
               }
            })

            const vm =  new Vue({
                el:'#root',
                data:{
                    msg:'你好！'
                },
                //第二步：注册组件（局部注册）
                components:{
                    xuexiao:school,
                    xuesheng:student,
                    //组件名和创建时的组件名一致，可以简写，student:student ==> student
                    school,
                    student
                }
            })

            const vm2 =  new Vue({
                el:'#root2',
                //vm2实例想要使用组件还需要在vm2中注册
                components:{
                    school,
                    student
                }
            })


            let data1 = {a:1,b:2}
            const x1 = data1
            const x2 = data1
            //修改了x1.a=11，x2.a也会变成11，因为data1始终是个对象

            function data2(){
                return {
                    a:1,
                    b:2
                }
            }
            const x3 = data2()
            const x4 = data2()
            //修改了x2.a=11，x4.a仍然是1，因为每次调用data2()函数，返回的都是新的data2中的数据

            
        </script>

        
    </body>
</html>